<script setup>
import { Search, Plus } from '@element-plus/icons-vue'
import { course } from '@/api/course.js'
import { ref } from 'vue'
const tableData = ref([])
import { useRouter } from 'vue-router'
const router = useRouter()
const input = ref('')

//拿到用户的学号并且传递给后端，展示数据层面
const Id = ref('')
const userInfo = ref('')
userInfo.value = JSON.parse(localStorage.getItem('info'))
Id.value = userInfo.value.stuId
var ids = Id.value
console.log(ids)
const ListData = async () => {
  const res = await course(Id)
  console.log(res)
  tableData.value = res.data
  console.log(tableData.value)
}
ListData()
import { UseCourseStore } from '@/stores'
const useCourseStore = UseCourseStore()

const { CourseData } = useCourseStore
console.log(tableData)

//搜索课程事件
const search = () => {
  console.log(input.value)
  tableData.value = tableData.value.filter((item) => {
    return item.courseName.includes(input.value) || item.teacher.includes(input.value)
  })
  console.log(tableData.value)
}

//当清空时将数据还原
const clear = () => {
  if (input.value == '') {
    ListData()
  }
}
</script>
<template>
  <div id="study-course">
    <div>
      <el-button
        type="primary"
        round
        :icon="Plus"
        style="box-shadow: 0.125rem 0.125rem 0.125rem #ccc; margin-left: 1.875rem"
      >
        添加课程
      </el-button>
      <el-input
        placeholder="请输入内容"
        :prefix-icon="Search"
        v-model="input"
        @mouseleave="clear()"
        @keyup.enter="search()"
        clearable="true"
        style="width: 12.5rem; float: right"
      ></el-input>
    </div>
    <div style="margin-top: 1.875rem">
      <ul style="list-style: none; padding: 0">
        <li v-for="item in tableData" :key="item.courseId" @click="CourseData(item.courseId)">
          <div>
            <img
              :src="item.courseImage"
              style="width: 16.25rem; height: 11.25rem; border-radius: 0.625rem"
            />
          </div>

          <h5>{{ item.courseName }}</h5>

          <h5 style="color: #a8a8b3">{{ item.teacher }}</h5>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="scss" scoped>
#study-course {
  padding-bottom: 8.75rem;
  height: 100vh;
}
h5 {
  margin: 0rem;
  padding: 0.3125rem;
  font-size: 1.0625rem;
  color: black;
  cursor: pointer;
}
h5:hover {
  color: cornflowerblue;
}

h3 {
  margin: 0;
  padding: 0.625rem;
}
li {
  margin-bottom: 1.25rem;
  display: inline-block;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
  width: 25rem;
}
img:hover {
  cursor: pointer;
}
h3:hover {
  cursor: pointer;
  color: cornflowerblue;
}
</style>
